<template>
    <div>
        <Form :label-width="80">
            <Row>
                <Alert type="success" show-icon>此页面可创建新的投票项目信息</Alert>
            </Row>
            <Row>
                <Col span="24">
                <FormItem label="项目标题：">
                    <Input placeholder="填写项目标题" v-model="voteItem.title" :value="voteItem.name"/>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                <FormItem label="项目图片：">
                    <Upload
                            type="drag"
                            action="http://up-z2.qiniup.com"
                            :data="{token: this.qiniuToken}"
                            :on-success="uploadSuccess"
                            :on-remove="uploadRemove"
                            :on-preview="uploadPreview"
                            :before-upload="beforeUpload" >
                        <div style="padding: 20px 0">
                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                            <p>点击或拖拽图片到此处上传</p>
                        </div>
                    </Upload>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                <FormItem label="项目简介：">
                    <Input type="textarea" :rows="3" v-model="voteItem.brief" :value="voteItem.brief"/>
                </FormItem>
                </Col>
            </Row>
        </Form>
    </div>
</template>

<script>

    import util from '../../libs/util'

    export default {
        data() {
            return {
                qiniuToken: '',
                isUpload: false
            }
        },
        methods: {
            retrieveUploadToken() {

                util.ajax({
                    url: '/qiniu/uploadtoken',
                    method: 'get',
                    params: {},
                }).then(response => {

                    if (response.data.errorCode === 0) {
                        this.qiniuToken = response.data.data.token;
                    }

                }).catch(error => {
                    console.log(error);
                    this.$Message.error('获取上传Token失败，网络错误!');
                });
            },
            uploadSuccess(response, file) {
                file.name = '上传成功，点击查看';
                this.isUpload = true;
                this.voteItem.imgUrl = response.hash;
            },
            uploadRemove() {
                this.isUpload = false;
                this.voteItem.imgUrl = ''
            },
            uploadPreview(file) {
                window.open('http://cdn.maxstudiozhuhai.com/' + file.response.hash)
            },
            beforeUpload() {
                if (this.isUpload) {
                    this.$Message.error('一个项目只能上传一张图片，请删除后重新选择');
                    return false;
                }
            }
        },
        mounted() {
            this.retrieveUploadToken()
        },
        props:['voteItem'],
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>